<template>
	<view>
		<view class="top_box">
			<view class="list_box line1" @click="showChangeTb">
				<text>所在地区</text>
				<view class="info-txt">
					<!-- 选择地区弹窗 -->
					<u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker>
				</view>
				<view class="arrow">
					<u-icon name="arrow-right" color="#bbbbbb" size="18"></u-icon>
				</view>
			</view>
			<view class="list_box">
				<text>详细地址</text>
				<input class="sl-input" v-model="detailedAddress" type="text" placeholder="请输入街道、小区、楼栋、房间号" />
			</view>
		</view>

		<view class="btn-box">
			<view class="btn-submit" hover-class="btn-hover" @click="submit">确定</view>
		</view>

		<!-- 消息提示 -->
		<u-toast ref="uToastRef"></u-toast>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue';
	const uToastRef = ref(null); // 定义一个消息的ref同名
	const show = ref(false);
	const showChangeTb = () => {
		show.value = true
	}
const provinces = ['广东', '北京', '上海', '四川']; // Replace with your list of provinces
const cities = {
  '广东': ['深圳', '广州', '珠海', '佛山'],
  '北京': ['东城', '西城', '朝阳', '海淀'],
  '上海': ['黄浦', '徐汇', '长宁', '静安'],
  '四川': ['成都', '绵阳', '德阳', '攀枝花']
}; // Replace with your list of cities for each province

const districts = {
  '深圳': ['福田', '南山', '罗湖', '宝安'],
  '广州': ['越秀', '天河', '荔湾', '海珠'],
  // Add districts for other cities as needed
}; // Replace with your list of districts for each city

const columns = reactive([provinces, cities[provinces[0]], districts[cities[provinces[0]][0]]]);

const changeHandler = (e) => {
  const {
    columnIndex,
    index,
    picker
  } = e;

  if (columnIndex === 0) {
    const selectedProvince = provinces[index];
    const selectedCity = cities[selectedProvince][0];
    const selectedDistrict = districts[selectedCity][0];

    // Update columns dynamically
    picker.setOptions(1, cities[selectedProvince]);
    picker.setColumnValue(1, selectedCity);

    picker.setOptions(2, districts[selectedCity]);
    picker.setColumnValue(2, selectedDistrict);
  }
};

const confirm = (e) => {
  console.log('confirm', e);
  show.value = false;
};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f2f2f2;
	}

	.line1 {
		border-bottom: 1px solid #eaebec;
	}

	.list_box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		line-height: 100rpx;
		color: #333333;
		background-color: #fff;
		padding: 0 50rpx;

		text {
			width: 140rpx;
			color: #666;
			font-size: 28rpx;
			font-weight: 700;
			display: inline-block;
		}

		.sl-input {
			flex: 1;
			color: #999;
			text-align: left;
			font-size: 26rpx;
		}

		.arrow {
			width: 40rpx;
		}

		.info-txt {
			width: 480rpx;
		}
	}

	.btn-box {
		display: flex;
		justify-content: center;
		width: 100%;
		text-align: center;
		margin-top: 60rpx;

		.btn-submit {
			color: #fff;
			font-size: 28rpx;
			width: 680rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #6285e9;
			border-radius: 10rpx;
		}

		.btn-hover {
			background-color: #567ce9;
		}
	}
</style>